<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--?限制在一定时间内重复触发同一事件的次数，从而减少不必要的计算和网络请求，提高页面性能和用户体验-->
<!--?实现防抖的方法是在事件触发时设置一个定时器，在规定的时间内，如果事件再次触发，则清除之前的定时器并重新设置一个新的定时器。如果在规定时间内没有再次触发事件，则执行事件处理函数。-->
<script>
function debounce(fn,delay) {
    //? 是个闭包 因为要保存timer
    let timer = null
    return function (...args) {
        //? 如果timer存在 清除重设
        if (timer) {
            clearTimeout(timer)
            timer = null
        }
        timer = setTimeout(() => {
            fn(...args)
        },delay)
    }

}
function testDebounce() {
    console.log('debounce test start');
    const debounceFunc = debounce(function() {
        console.log('debounce function called');
    }, 1000);
    debounceFunc();
    setTimeout(debounceFunc, 500);//? 被防抖
    setTimeout(debounceFunc, 1000); //? 被防抖
    setTimeout(debounceFunc, 1500);//? 最后一次重置定时器 后面无调用 执行里面的fn
}

testDebounce();
</script>
</body>
</html>
